<template>
  <ContentWrap :body-style="{ padding: 0 }" class="border-none!">
    <el-row class="w-100% mx-0!" :gutter="10">
      <el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="3">
        <div class="pos-relative">
          <el-image :fit="'fill'" :src="item.spu.picUrl || defaultProductImg" />
          <el-image
            :fit="'fill'"
            class="!bg-black pos-absolute! left-0 z-10"
            style="opacity: 0.4"
            :src="serveCardIcon"
          />
        </div>
      </el-col>
      <el-col :xs="17" :sm="17" :md="17" :lg="16" :xl="17">
        <div class="flex flex-col justify-between h-full p-y-5px">
          <div class="flex items-center">
            <el-text line-clamp="1" class="custom-text-18 c-[#11192d]! .dark:c-[#fff]!">
              <div class="flex flex-row items-center">
                <el-tag class="p-2px! !h-full !m-r-2px">换</el-tag>
                <SpuTag
                  :type="DICT_TYPE.PRODUCT_SPU_TYPE"
                  :value="item.spuType"
                  v-if="item.spuType"
                />
                <span class="c-[#11192d]! .dark:c-[#fff]!">{{
                  item.spu.spuName || item.spu.titleName
                }}</span>
              </div>
            </el-text>
          </div>

          <div class="custom-text-16 flex items-center">
            <el-text class="custom-text-16 c-[#11192d]! .dark:c-[#fff]!">
              ID: {{ item.sku.skuId }}</el-text
            >
            <el-divider direction="vertical" />
            <el-tag
              type="primary"
              class="custom-text-16"
              v-for="property in item.sku.properties"
              :key="property.propertyId"
            >
              {{ property.valueName }}
            </el-tag>
          </div>
          <div class="flex items-center">
            <slot name="extInfo"></slot>
          </div>
        </div>
      </el-col>
      <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
        <div class="flex !h-full justify-end">
          <slot name="itemButton"></slot>
        </div>
      </el-col>
    </el-row>
  </ContentWrap>
</template>
<script setup lang="ts" name="spuItem">
import { onMounted } from 'vue'
import { propTypes } from '@/utils/propTypes'
import serveCardIcon from '@/assets/imgs/serveCard-icon.png' //服务卡项图片
import defaultProductImg from '@/assets/imgs/default-product-img.jpg' //默认商品图
import { DICT_TYPE } from '@/utils/dict'

defineProps({
  // 选中的门店列表
  item: propTypes.object.def({})
})

onMounted(() => {})
</script>
<style lang="scss" scoped>
:deep(.el-image) {
  border-radius: 2px;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
:deep(.el-image__inner) {
  position: absolute !important;
}
</style>
